$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$width: 82.292vw;

#page-top {
  .first_text{
    position: relative;
    display: flex;
    &::before{
      content:'';
      display: block;
      background: url(../images/yh1.png) no-repeat;
      background-size: contain;
      width: 19px;
      height: 15px;
      margin-top: 10px;
      margin-right: 20px;
    }
  }
  .top_pic{
    &::before{
      margin-top: 0;
    }
  }
  .margin-left{
    margin-left: 38px;
  }
  .last_text{
    position: relative;
    display: flex;
    &::after{
      content:'';
      display: block;
      background: url(../images/yh1.png) no-repeat;
      background-size: contain;
      width: 19px;
      height: 15px;
      margin-left: 20px;
    }
  }
  #t-2{
    em{
      font-size: 2vw;
      text-transform: uppercase;
    }
  }
  .s3 {
    display: block;

    h4 {
      color: #333;
      font-size: $fontSize_32;
    }

    .news_list {
      display: flex;
      justify-content: space-between;
      margin-top: 4vw;

      .l {
        width: 20%;

        .types {
          a {
            color: #999;
            font-size: $fontSize_28;
            display: flex;
            align-items: center;
            margin-bottom: 1.5vw;
            transition: all 600ms;

            span {
              width: 10px;
              height: 10px;
              background-color: rgba(0, 0, 0, 0.25);
              border-radius: 50%;
              margin-right: 20px;
              transition: all 600ms;
            }

            &:hover {
              color: #000;

              span {
                background-color: #DA353B;
              }
            }
          }

          .active {
            color: #000;

            span {
              background-color: #DA353B;
            }
          }
        }
      }

     .allList{
      width: 80%;
      .list {
        width: 100%;
        display: none;
        a {
          width: 28%;
          margin: 0 0 4vw 4%;

          img {
            transition: all 600ms;
          }

          span {
            margin: 10px 0;
          }

          p {
            width: 100%;
            letter-spacing: 0;
            line-height: 1.4;
            transition: all 600ms;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .des {
            font-size: 0.8vw;
            color: #666;
            line-height: 1.5;
            margin-top: 10px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          &:hover {
            img {
              transform: scale(1.05);
            }

            p {
              color: #DA353B;
            }
          }
        }
      }
      .show-box{
        display: flex;
      }
     }
    }
  }
  .about{
    background: #F0F0F0;
    padding: 3vw 5vw;
    position: relative;
    .bg1{
      position: absolute;
      left: 0;
      bottom:0;
      img{
        max-width: 18vw;
        object-fit: contain;
      }
    }
    .bg2{
      position: absolute;
      right: 0;
      top:0;
      img{
        max-width: 15vw;
        object-fit: contain;
      }
    }
    .t{
      color: #333;
      font-size: $fontSize_32;
    }
    .allItems{
      margin-top: 3vw;
       margin-left: 15vw;
       display: flex;
       justify-content: space-between;
       background-color: white;
       .item{
        width: 25%;
        text-align: center;
        padding: 3vw 0;
        img,svg{
          width: auto;
        }
        .pic{
          position: relative;
          display: inline-block;
          img{
            border-radius: 5px;
          }
          .icon{
            position: absolute;
            right:-10px;
            top:-10px;
          }
        }
        .p1{
          color: #333;
          font-size: $fontSize_24;
          margin:15px 0 10px 0;
        }
        .p2{
          color: #666;
          font-size: $fontSize_18;
          transition: all 600ms;
        }
       }
       .item1{
        width: 25%;
        text-align: center;
        padding: 3vw 0;
        transition: all 600ms;
        background-color: white;
        z-index: 10;
        position: relative;
        &::after{
          content:'';
          display: block;
          position: absolute;
          background-color: rgba(153, 153, 153, 0.40);
          width: 1px;
          height: 50%;
          right:0;
          top:25%;
        }
        .pic{
          width: 62px;
          height: 53px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin:0 auto;
        }
         svg{
          width: auto;
          path{
            transition: all 600ms;
          }
        }
        .p1{
          color: #333;
          font-size: $fontSize_24;
          margin:15px 0 10px 0;
          transition: all 600ms;
        }
        .des{
          color: #666;
          font-size: $fontSize_18;
          line-height: 1.4;
          transition: all 600ms;
        }
       }
       .item1:last-child{
        &::after{
          display: none;
        }
       }
       .active{
        background: #DA353B;
        .pic{
          svg{
            path{
              fill: white;
            }
            .star{
              fill: #DA353B;
            }
          }
        }
        .p1,.des,.p2{
          color:white;
        }
       }
    }
  }
}
@media screen and (max-width: 1024px) {
  #page-top{
    .first_text{
      &::before{
        width: 10px;
        height: 8px;
        margin-top: 5px;
        margin-right: 10px;
      }
    }
    .margin-left{
      margin-left: 20px;
    }
    .last_text{
      position: relative;
      display: flex;
      &::after{
        width: 10px;
        height: 8px;
        margin-left: 10px;
      }
    }
    .about{
      .allItems{
        .item1:nth-child(2){
          &::after{
            display: none;
          }
        }
      }
    }
  }
  #h{
    display: none;
  }
  #page-top #t-2{
    em{
      font-size: 18px;
    }
  }
  #page-top .s3{
    h4{
      font-size: 24px;
    }
    .news_list{
      margin-top: 20px;
      .l{
        width: 25%;
        .types{
          a{
            font-size: 14px;
            span{
              height: 5px;
              width: 5px;
              margin-right: 8px;
            }
          }
        }
      }
      .allList{
        width: 70%;
        .list{
          a{
            width: 100%;
            margin: 0 0 30px 0;
            span{
              font-size: 14px;
            }
            p{
              font-size: 16px;
            }
            .des{
              font-size: 14px;
              line-height: 1.8;
            }
          }
        }
        .show-box{
          display: block;
        }
      }
    }
  }
  #page-top .about{
    padding: 30px 5%;
    .t{
      font-size: 24px;
    }
    .allItems{
      margin-left: 0;
      flex-wrap: wrap;
      margin-top: 20px;
      .item1{
        width: 50%;
        padding: 30px 0;
        .pic{
          width: 45px;
          height: 30px;
        }
        .p1{
          font-size: 16px;
        }
        .p2,.des{
          font-size: 14px;
        }
      }
      .item{
        .pic{
          img{
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
        }
      }
    }
  }
}